<!-- @format -->

<script setup>
	// 运行 vue3-node-server 项目, 进入根目录:
	// 1. 安装依赖: npm i
	// 2. 启动服务: npm run start
	// 接口地址：http://localhost:4000/api/news
	// 请求方式：get
	// 请求参数：无

	// 导入 axios
	import axios from 'axios'
	import { ref } from 'vue'

	// 新闻列表
	const newsList = ref([])

	getNewsList()

	// 获取新闻列表
	async function getNewsList() {
		// 发请求
		const resp = await axios({
			url: 'http://localhost:4000/api/news', // 请求地址
			method: 'get' // 请求方式
		})
		// 保存数据
		newsList.value = resp.data.data
	}
</script>

<template>
	<ul>
		<li
			class="news"
			v-for="item in newsList"
			:key="item.id">
			<div class="left">
				<div class="title">{{ item.title }}</div>
				<div class="info">
					<span>{{ item.source }}</span>
					<span>{{ item.time }}</span>
				</div>
			</div>
			<div class="right">
				<img
					:src="item.img"
					alt="img" />
			</div>
		</li>
	</ul>
</template>

<style>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.news {
		display: flex;
		height: 120px;
		width: 600px;
		margin: 0 auto;
		padding: 20px 0;
		cursor: pointer;
	}
	.news .left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 10px;
	}
	.news .left .title {
		font-size: 20px;
	}
	.news .left .info {
		color: #999999;
	}
	.news .left .info span {
		margin-right: 20px;
	}
	.news .right {
		width: 160px;
		height: 120px;
	}
	.news .right img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
